<template>
  <div :style="frameStyle"><slot></slot></div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { calculateStyle } from "@/util/style";
export default defineComponent({
  name: "ExhibitionFrame",
  props: ["componentName", "componentParams"],
  setup(props) {
    const { PositionForm, SizeForm } = props.componentParams;
    const frameStyle = computed(() => {
      const position = calculateStyle(PositionForm.property);
      const size = calculateStyle(SizeForm.property);

      return { ...position, ...size };
    });

    return {
      frameStyle,
    };
  },
});
</script>

<style lang="scss" scoped></style>
